<template>
  <div class="index">
    <router-view></router-view>

    <div class="tabFooter">
      <ul>
        <li v-for="(item, index) in list" :key="index" @click="$router.push(item.path)">
          <!-- <div class="icon"></div> -->

          <img :src="item.name == myname ? item.active : item.icon" :class="item.name != myname ? '' : 'addimg'" alt=""
            @click="tabactive(item.name, index)" />
          <div v-show="item.name != myname" class="name">{{ item.name }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs, watch } from "vue";

const data = reactive({
  list: [
    {
      path: "/",
      icon: "",
      name: "选课",
      active:
        "",
    },
    {
      path: "/mylesson",
      icon: "",
      name: "我的课",
      active:
        "",
    },
    {
      path: "/miaowu",
      icon: "",
      name: "喵屋",
      active:
        "",
    },
    {
      path: "/tool",
      icon: "",
      name: "工具",
      active:
        "",
    },
    {
      path: "/myinfo",
      icon: "",
      name: "我的",
      active:
        "",
    },
  ],
  myname: "选课",
});
data.myname = localStorage.getItem("myname") + "";
// 点击切换tab
const tabactive = (name, index) => {
  localStorage.setItem("myname", name);
  data.myname = localStorage.getItem("myname") + "";
};
const { active, list, myname } = toRefs(data);
</script>
<style scoped>
.tabFooter {
  background: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
}

ul {
  width: 750px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  text-align: center;
  padding: 0;
}

li {
  width: 20%;
}

ul li img {
  width: 40px !important;
  height: 40px !important;
}

/* ul li img:nth-child(1) {
  width: 100px;
  height: 100px;
} */
.addimg {
  width: 80px !important;
  height: 80px !important;
}
</style>
